<template>
    <el-dialog v-model="dialogVisible" :title="winTitle" :close-on-click-modal="false" append-to-body width="800"
        class="editDialog" align-center>
        <el-form inline class="basicForm" label-position="right" v-model="formObj" label-width="100px">
            <el-form-item label="设备名" required>
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="序列号">
                <el-input v-model="formData.code"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="IP地址">
                <el-input v-model="formData.mac"></el-input>
            </el-form-item>

            <el-form-item label="端口号">
                <el-input v-model="formData.port"></el-input>
            </el-form-item>

            <el-form-item label="产品类型">
                <el-select v-model="formData.modelCode" placeholder="请选择类型">
                    <el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName + (item.remark ? '(' + item.remark + ')' : '')
                        " :value="item.modelCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="设备描述">
                <el-input v-model="formData.remark"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="dialogVisible = false" auto-insert-space>取消</el-button>
            <el-button type="primary" @click="onConfirm" auto-insert-space>确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from "vue";

import { ElMessage } from "element-plus";

import { hardwareEdit } from "../../../utils/requests";

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

let winTitle = ref("");

let formData = ref({
    name: "",
    code: "",
    ipAddr: "",
    port: null,
    remark: "",
    modelCode: "",
    id: "",
    taskId: null, 
});

let isEdit = ref(false);
let modelList = ref([]);

const openDialog = (modelList, rowData) => {
    dialogVisible.value = true;
    modelList.value = modelList;
    formData.value.taskId = rowData.taskId;


    if (!rowData || !rowData.id) {
        winTitle.value = "新增";

        formData.value.name = "";
        formData.value.code = "";
        formData.value.ipAddr = "";
        formData.value.port = null;
        formData.value.modelCode = "";
        formData.value.remark = "";
        formData.value.id = "";
        isEdit.value = false;
    } else {
        winTitle.value = "修改";
        formData.value.name = rowData.name;
        formData.value.code = rowData.code;
        formData.value.ipAddr = "" + rowData.ipAddr;
        formData.value.port = rowData.port;
        formData.value.remark = rowData.remark;
        formData.value.modelCode = rowData.modelCode;
        formData.value.id = rowData.id;
        isEdit.value = true;
    }
};

const onConfirm = () => {
    hardwareEdit(formData.value).then((data) => {
        if (data) {
            ElMessage.success("保存成功");
            emits("confirm");
            dialogVisible.value = false;
        } else {
            ElMessage.error("保存失败");
        }
    });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.basicForm,
.selectionForm {
    >* {
        width: calc(50% - 20px);
        margin-right: 20px;

        .selectInput {
            flex: 1;
        }

        :deep(.el-date-editor) {
            width: 100%;
        }
    }

    >.long {
        width: calc(100% - 20px);
        margin-right: 20px;
    }

    .sumUnit {
        .text {
            margin-right: 10px;
        }
    }
}

.uploadWrap {
    position: relative;
    width: 270px;

    input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}
</style>
